<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="../static/lib/html5shiv.js"></script>
	<script type="text/javascript" src="../static/lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="../static/static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="../static/static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="../static/lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="../static/static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="../static/static/h-ui.admin/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="../static/lib/DD_belatedPNG_0.0.8a-min.js"></script>
	<script>DD_belatedPNG.fix('*');</script>
	<![endif]-->
	<title>3D柱状图</title>
	<script src="js/echarts.js"></script>

<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 900px;height:400px;"></div>

<script  th:fragment="scripts(scripts)">
	var myChart = echarts.init(document.getElementById('main'));

	option = {
		title : {
			text: '停车场统计',
			subtext: '2019总数据',
			x:'600px'
		},
		tooltip : {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		legend: {
			orient: 'vertical',
			left: '400px',

			data: ['全部车位','空闲车位','已售车位','全部合同','作废合同','生效合同']
		},
		series : [
			{
				name: '总数据',
				type: 'pie',
				radius : '55%',
				center: ['80%', '60%'],
				data:[

					{value:[[${selek}]], name:'全部车位'},
					{value:[[${result}]], name:'空闲车位'},
					{value:[[${results}]], name:'已售车位'},
					{value:[[${selema}]], name:'全部合同'},
					{value:[[${selems}]], name:'作废合同'},
					{value:[[${selem}]], name:'生效合同'}
				],
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};


	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>

</body>
</html>